<template>
  <os-table v-loading="loading" stripe :columns="mColumns" :data="list" size="small" border :page="false"></os-table>
</template>
<script>
export default {
  name: 'OsFormTable',
  inject: ['elFormItem', 'elForm'],
  props: {
    value: Array,
    disabled: Boolean,
    columns: Array,
    btn: { type: Array, default: () => ['add', 'edit', 'del'] },
    mounted: Function,
    title: String,
    showAction: { type: Boolean, default: true },
    loading: Boolean
  },
  data () {
    return {
      fApi: null,
      list: [],
      editIndex: -1
    }
  },
  watch: {
    value: {
      handler (val) {
        if (Array.isArray(val)) {
          this.list = val
        }
      },
      immediate: true
    }
  },
  computed: {
    // 获取表单项的title
    mTitle () {
      return this.title || this.elFormItem.$children[0]?.$el?.innerText || ''
    },
    // 获取表单项的field
    field () {
      return this.elFormItem.prop
    },
    mColumns () {
      const re = [
        { type: 'index', align: 'center', label: '序号' },
        ...this.columns.filter(item => !item.target || item.target === 'table')
          .map(item => ({
            prop: item.prop,
            label: item.label,
            width: item.width,
            showOverflowTooltip: !!item.showOverflowTooltip,
            renderCell: item.renderCell,
            formatter: item.formatter
          }))
      ]
      const action = {
        prop: 'action',
        width: 140,
        headerAlign: 'center',
        align: 'center',
        fixed: 'right',
        renderHeader: () => {
          return <div>
            <span>操作</span>
            <el-button disabled={this.disabled} type="primary"></el-button>
          </div>
        },
        renderCell: (data) => <div>
          {this.btn.includes('edit') && <el-button disabled={this.disabled} size="small" type="text" onClick={() => this.onEdit(data)}>编辑</el-button>}
          {this.btn.includes('del') && <el-button disabled={this.disabled} size="small" type="text" onClick={() => this.onDel(data)}>删除</el-button>}
        </div>
      }
      if (this.showAction) re.push(action)
      return re
    },
    mRule () {
      return this.columns.filter(item => !item.target || item.target === 'form')
        .map(item => ({
          type: item.type || 'Input',
          field: item.prop,
          title: item.label,
          validate: item.validate || [],
          props: item.props || {},
          col: item.col,
          on: item.on || {}
        }))
    },
    mOption () {
      return {
        submitBtn: false,
        resetBtn: false,
        row: { type: 'flex' },
        global: {
          '*': {
            col: { span: 12 }
          }
        },
        form: {
          labelWidth: '160px',
          labelSuffix: ':'
        },
        mounted: $f => {
          this.mounted && this.mounted($f)
        }
      }
    }
  },
  methods: {
    onAdd (data, index = -1) {
      this.editIndex = index
      this.$units.dialog(`${data ? '编辑' : '添加'}${this.mTitle}`,
        <form-create vModel={this.fApi} rule={this.mRule} option={this.mOption} />,
        { btn: [{ text: '确定', cb: this.addItem }] }
      )
      this.$nextTick(() => this.$f.resetFields(this.fApi, data))
    }
  },
  onEdit ({ row, index }) {
    this.onAdd(row, index)
  },
  onDel ({ index }) {
    this.list.splice(index, 1)
    this.changeData()
  },
  changeData () {
    this.$emit('input', this.list)
    this.$$nextTick(() => this.elForm.validateField(this.field))
  },
  addItem () {
    this.fApi.validate((valid) => {
      if (valid) {
        if (this.editIndex >= 0) {
          this.list.splice(this.editIndex, 1, this.fApi.formData())
        } else {
          this.list.push(this.fApi.formData())
        }
        this.$utils.hideDialog()
        this.changeData()
      }
    })
  }
}
</script>
